<template>
  <div>
    <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count"><strong></strong>剩余{{ prop.num }}</span>
      <ul class="filters">
        <li>
          <a @click="filterList('all')" href="#/">全部</a>
        </li>
        <li>
          <a @click="filterList('go')" href="#/active">进行中</a>
        </li>
        <li>
          <a @click="filterList('wc')" href="#/completed">已完成</a>
        </li>
      </ul>
      <button @click="clern" class="clear-completed">
        清除已完成
      </button>
    </footer>
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
const prop = defineProps({
  list: {
    type: Array,
  },
  num: {
    type: Number,
  },
});
const type1 = ref('all')
function filterList(type) {
  type1.value = type
  if (type === 'all') {
    return prop.list
  } else if (type === 'go') {
    return prop.list.filter(item => item.isDone === false)
  } else {
    return prop.list.filter(item => item.isDone === true)
  }
}

// const emits = defineEmits(['clern', 'qb', 'jx', 'wc'])

// function clern() {
//   emits('clern')
// }

// function qb() {
//   emits('qb')

// }

// function jx() {
//   emits('jx')

// }

// function wc() {
//   emits('wc')

// }

</script>
